<template>
  <ContentWrap v-if="item" title="节点信息" :class="'flowNode' + (isError ? ' error' : '')">
    <template #title>
      <div :class="item.nodeCls">
        <span class="name">
          <icon icon="node" class="nodeIcon" />
          {{ item.name }}
        </span>
        <icon class="icon" :icon="item.auditType == 1 ? 'user' : 'peoples'" />
      </div>
    </template>
    {{ item.show }}
    <p v-if="isError" class="errorMsg" :title="error">{{ error }}</p>
  </ContentWrap>
</template>

<script>
import { ContentWrap } from '@/components/ContentWrap'
export default {
  name: 'FlowNode',
  components: {
    ContentWrap
  },
  inject: ['getNode'],
  data() {
    return {
      item: null,
      isError: false,
      error: null
    }
  },
  computed: {},
  mounted() {
    const node = this.getNode()
    const data = node.getData()
    this.initNode(data)
    // 监听数据改变事件
    node.on('change:data', ({ current }) => {
      this.initNode(current)
    })
  },
  methods: {
    initNode(node) {
      if (node.nodeType === 1) {
        node.nodeCls = 'single'
      } else {
        node.nodeCls = 'while'
      }
      this.item = node
      this.isError = node.isError === true
      if (this.isError) {
        this.error = node.error
      }
    }
  }
}
</script>
<style>
.flowNode .el-card__header:has(.single) {
  background-color: #1890ff !important;
  color: #fff;
  padding: 0px;
  height: 35px;
  line-height: 35px;
}
.flowNode .el-card__header:has(.while) {
  background-color: #43af2b !important;
  color: #fff;
}
.flowNode .el-card__body {
  font-size: 14px;
  line-height: 20px;
  height: 75px;
  padding: 10px;
}
.flowNode .icon {
  float: right;
}
.flowNode .name .nodeIcon {
  color: #fff;
  font-size: 16px;
  margin-right: 5px;
}
</style>
<style scoped>
.error {
  border-color: red;
}
.errorMsg {
  color: #ff1818;
}
</style>
